<!-- Loading.vue -->  
<template>  
    <div v-if="loading.is_show" class="loading-overlay">  
       <span class="el-icon-loading" style="font-size:50px;color:rgba(255, 255, 255, 1);"></span>
       <p class="msg">{{loading.message || "努力加载中..."}}</p>
    </div>  
  </template>  
    
  <script>  
  import {mapGetters, mapMutations} from "vuex"
  export default {  
    data() {  
      return {  
      };  
    },  
    created() {
        console.log(this.loading)
    },
    
    computed: {
        ...mapGetters([
            'loading'
        ])
    },
    methods: {  
      ...mapMutations({
        'show_loading': 'SHOW_LOADING',
        'hide_loading': 'HIDE_LOADING'
      })
    },
    watch: {
        "$store.getters.loading": {
            handler(nv) {
                if(nv.is_show) {
                    document.body.setAttribute("style", 'overflow: hidden;');
                }else {
                    document.body.setAttribute("style", 'overflow: auto;')
                }
            },
            deep: true,
            immediate: true
        }
    }
  };  
  </script>  
    
  <style scoped lang="scss">  
  .loading-overlay {  
    position: fixed;  
    top: 0;  
    left: 0;  
    width: 100%;  
    height: 100%;  
    z-index: 99999;
    // background: rgba(255, 255, 255, 0.7);  
    background: rgba(0,0,0,0.7);
    z-index: 9999;  
    display: flex;  
    justify-content: center;  
    align-items: center;  
    flex-direction: column; 
    .msg{
        font-size: 28px;
        padding-bottom: 100px;
        text-align: center;
        margin-top: 10px;
        letter-spacing: 2px;
        color:rgba(255, 255, 255, 1) ;
    }
  }  
  </style>